<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>书城首页</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
    <link type="text/css" rel="stylesheet" href="static/css/style.css">

</head>
<body>

<div id="header">
    <img class="logo_img" alt="" src="static/img/logo.gif" width="230px" height="80px">
    <span class="wel_word">网上书城</span>
    <div>
        <c:choose>
            <c:when test="${empty sessionScope.user}">
                <a href="pages/user/login.jsp">登录</a> |
                <a href="pages/user/regist.jsp">注册</a> &nbsp;&nbsp;
            </c:when>
            <c:otherwise>
                <span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临网上书城</span>
                <a href="UserServlet?method=logout">注销</a>
            </c:otherwise>
        </c:choose>
        <a href="javascript:jumpcart()">购物车</a>
        <a href="pages/manager/manager.jsp">后台管理</a>
    </div>
</div>
<div id="main">
    <div id="book">
        <div class="book_cond" style="margin-left: 0px;text-align: center">
            <form id="fid">
                <input type="hidden" name="method" value="searchPage">
                书名:<input type="text" name="name" value="${requestScope.name}">
                作者:<input type="text" name="author" value="${requestScope.author}">
                价格：<input id="min" type="text" name="min" value="${requestScope.min}"> 元 -
                <input id="max" type="text" name="max" value="${requestScope.max}"> 元
                <input type="button" value="查询" id="searchBut"/>
            </form>
        </div>
        <div style="text-align: center;visibility: hidden;" id="cartdiv">
            <span>您的购物车中有<span style="color: red" id="bookCount"></span>件商品</span>
            <div>
                您刚刚将<span style="color: red" id="bookName"></span>加入到了购物车中
            </div>
        </div>


        <div class="b_list" style="display: none;">
            <div class="img_div">
                <img class="book_img" alt="" src=""/>
            </div>
            <div class="book_info">
                <div class="book_name">
                    <span class="sp1">书名:</span>
                    <span class="sp2"></span>
                </div>
                <div class="book_author">
                    <span class="sp1">作者:</span>
                    <span class="sp2"></span>
                </div>
                <div class="book_price">
                    <span class="sp1">价格:</span>
                    <span class="sp2"></span>
                </div>
                <div class="book_sales">
                    <span class="sp1">销量:</span>
                    <span class="sp2"></span>
                </div>
                <div class="book_amount">
                    <span class="sp1">库存:</span>
                    <span class="sp2"></span>
                </div>
                <div class="book_add">
                    <input type="button" value="加入购物车" class="addToCart" bookId=""/>
                </div>
            </div>
        </div>
    </div>

    <!--分页 -->
    <div id="page_nav">
        <a href="#">首页</a>
        <a href="#">上一页</a>
        <a href="#">下一页</a>
        <a href="#">末页</a>
        共<span>100</span>页，<span>100</span>条记录 到第<input name="pn" id="pn_input"/>页
        <input id="butid" type="button" value="确定">
    </div>

</div>
<div id="bottom">
		<span>
			网上书城.Copyright &copy;2020
		</span>
</div>
</body>
</html>
<script src="static/script/jquery-3.6.0.min.js"></script>
<script src="static/layui/layui.js"></script>
<script>
    var peipage ;

    function jumpcart(){
        if ("${sessionScope.user}" == "") {
            layer.msg('请先登录才能访问购物车!', {
                icon: 2,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            });
        }else{
            window.location.href = "pages/cart/cart.jsp";
        }
    }


    function mypage(flag) {
        var pageNo = "";
        if("首页" == flag){
            pageNo = 1;
        }else if("上一页"==flag){
            pageNo = peipage.pageNo - 1 ;
        }else if("下一页"==flag){
            pageNo = peipage.pageNo + 1 ;
        }else if("末页"==flag){
            pageNo = peipage.pageTotal ;
        }else{
            pageNo = flag;
        }

        //alert( $("#fid").serialize())
        //alert($("#fid").serialize()+"&pageNo="+pageNo);
        $.post("BookServlet", $("#fid").serialize()+"&pageNo="+pageNo, function (msg) {
            peipage = msg;
            $("#page_nav").find("span").eq(0).html(msg.pageTotal)
            $("#page_nav").find("span").eq(1).html(msg.pageTotalCount)
            $("div[peijie=delete]").remove();
            for (let i = 0; i < msg.items.length; i++) {
                newdiv = $("div.b_list:first").clone(true);//clone(true)事件一起复制
                newdiv.attr("peijie" , "delete");//给这些克隆出来的元素添加一个属性,方便后面删除他们
                newdiv.css("display", "");
                newdiv.find("img.book_img").attr("src", msg.items[i].imgPath);
                newdiv.find("div.book_name").find("span").eq(1).html(msg.items[i].name);
                newdiv.find("div.book_author").find("span").eq(1).html(msg.items[i].author);
                newdiv.find("div.book_price").find("span").eq(1).html("￥" + msg.items[i].price);
                newdiv.find("div.book_sales").find("span").eq(1).html(msg.items[i].sales);
                newdiv.find("div.book_amount").find("span").eq(1).html(msg.items[i].stock);
                newdiv.find("div.book_add").find("input").attr("bookId", msg.items[i].id)
                $("div.b_list:last").after(newdiv)
            }
        })
    }

    $(function () {
        mypage("首页");//网页加载完成调用此方法显示第一页数据

        $("#butid").click(function(){
            //获取输入框里面的值
            var pageNo = $("#pn_input").val();
            var zz2 = new RegExp("^[0-9]*[1-9][0-9]*$");
            if (zz2.test(pageNo)) {
                mypage(pageNo);
            } else {
                layer.msg('请输入整数!', {
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                });
            }
        });

        $("#searchBut").click(function (){
            mypage("首页");
        });

        $("#page_nav").find("a").eq(0).click(function(){
            //点击首页时显示第一页数据
            mypage("首页")
        })
        $("#page_nav").find("a").eq(1).click(function(){
            //点击上一页时显示数据
            mypage("上一页")
        })
        $("#page_nav").find("a").eq(2).click(function(){
            //点击下一页时显示数据
            mypage("下一页")
        })
        $("#page_nav").find("a").eq(3).click(function(){
            //点击末页时显示数据
            mypage("末页")
        })


        $("input.addToCart").click(function () {
            if ("${sessionScope.user}" == "") {

                layer.msg('请先登录在来添加购物车!', {
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                });
            } else {
                var id = $(this).attr("bookId");
                $.get("CartServlet", "method=addItem&id=" + id, function (msg) {
                    // alert( msg.bookName  + " = " + msg.bookCount)
                    $("#bookCount").html(msg.bookCount);
                    $("#bookName").html(msg.bookName)
                    $("#cartdiv").css("visibility", "");//显示出来

                    layer.msg('添加购物车成功', {
                        icon: 1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                });
            }
        });
    });
</script>